<template>
  <div class="uiconWrap">
    <div class="uicon-wrap">
      <div class="uiconbox" v-for="item of iconList" :key="item.iconId">
        <div :class="setClass(item.iconId)">
          <div class="newCenter_helpContbox">
            <div class="newCenter_helpContbox1" :style="item.paddingTop">
                <div class="newCenter_helpImg" :style="item.iconImgPosition"></div>
            </div>
            <div class="newCenter_helpContbox2">
                {{item.title}}
            </div>
            <div class="newCenter_helpContbox3" v-for="(items, index) in item.des" :key="index">
                {{items.desC}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UindexBanner',
  data () {
    return {
      iconList: [
        {
          iconId: 1,
          title: '版权管理',
          iconImgPosition: 'width: 48px;height: 56.5px;background-position-x: 0;background-position-y: -50.5px;',
          paddingTop: 'padding-top:40px;',
          des: [
            {
              desC: '3分钟快速版权保护'
            }
          ]
        },
        {
          iconId: 2,
          title: '授权管理',
          iconImgPosition: 'width: 50px;height: 53px;background-position-x: -53px;background-position-y: -50.5px;',
          paddingTop: 'padding-top:18.222%;',
          des: [
            {
              desC: '授权结算更直接'
            }
          ]
        },
        {
          iconId: 3,
          title: '智能数据',
          iconImgPosition: 'width: 50px;height: 53.5px;background-position-x: -108px;background-position-y: -50.5px;',
          paddingTop: 'padding-top:19.111%;',
          des: [
            {
              desC: '大数据行业报告'
            }, {
              desC: '掌握IP成功的秘诀'
            }
          ]
        },
        {
          iconId: 4,
          title: '防伪溯源',
          iconImgPosition: 'width: 57px;height: 57px;background-position-x: 0;background-position-y: -111.5px;',
          paddingTop: 'padding-top:17.333%;',
          des: [
            {
              desC: '防伪溯源，一码解决'
            }
          ]
        },
        {
          iconId: 5,
          title: '法律维权',
          iconImgPosition: 'width: 57px;height: 51px;background-position-x: -62px;background-position-y: -111.5px;',
          paddingTop: 'padding-top:20%;',
          des: [
            {
              desC: '覆盖全国的维权网络'
            }, {
              desC: '免费维权'
            }
          ]
        },
        {
          iconId: 6,
          title: '精准营销',
          iconImgPosition: 'width: 56px;height: 54px;background-position-x: -124px;background-position-y: -111.5px;',
          paddingTop: 'padding-top:17.333%;',
          des: [
            {
              desC: '整合线上线下渠道'
            }, {
              desC: '实现增粉互动、精准营销'
            }
          ]
        }
      ]
    }
  },
  methods: {
    setClass (key) {
      let obj = {newCenter_helpAbox: true}
      obj[`bgUrl${key}`] = true
      return obj
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.uiconWrap
  padding 0 10px
.uicon-wrap
  display flex
  flex-direction row
  align-items center
  flex-wrap: wrap
.uiconbox
  width 33.333%
  padding 0 10px
  box-sizing border-box
.newCenter_helpAbox
  width 100%
  display block
  position relative
  height 265px
  cursor default
  margin-bottom 20px
  margin-top 0
  -webkit-transition margin-top .3s, -webkit-box-shadow .3s
  transition box-shadow .3s, margin-top .3s, -webkit-box-shadow .3s
.bgUrl1
  background #fff url('~img/ymtIndex_numbder_03.png') no-repeat
  background-size 96px 116px
  background-position 10px 8px
.bgUrl2
  background #fff url('~img/ymtIndex_numbder_05.png') no-repeat
  background-size 96px 116px
  background-position 10px 8px
.bgUrl3
  background #fff url('~img/ymtIndex_numbder_07.png') no-repeat
  background-size 96px 116px
  background-position 10px 8px
.bgUrl4
  background #fff url('~img/ymtIndex_numbder_20.png') no-repeat
  background-size 96px 116px
  background-position 10px 8px
.bgUrl5
  background #fff url('~img/ymtIndex_numbder_21.png') no-repeat
  background-size 96px 116px
  background-position 10px 8px
.bgUrl6
  background #fff url('~img/ymtIndex_numbder_23.png') no-repeat
  background-size 96px 116px
  background-position 10px 8px
.newCenter_helpAbox:hover
  margin-top -8px
  -webkit-box-shadow 0 0 12px 0 rgba(0, 0, 0, .1)
  box-shadow 0 0 12px 0 rgba(0, 0, 0, .1)
.newCenter_helpContbox
  position absolute
  top 0
  left 50%
  width 60.6852%
  margin-left -30.3426%
  height 92.45%
  padding-top 20px
.newCenter_helpContbox1
  width 100%
  text-align: center
  overflow hidden
  height 55.55555%
.newCenter_helpImg
  background-image url('~img/ymt-userIndex_bg.png')
  background-repeat no-repeat
  -webkit-background-size 182.5px 173px
  background-size 182.5px 173px
  overflow hidden
  display inline-block
.newCenter_helpContbox2
  line-height 36px
  font-size 20px
  color #333
  text-align center
  -webkit-transition color .3s
  transition color .3s
.newCenter_helpContbox3
  line-height 24px
  font-size 16px
  color #333
  text-align center
.newCenter_helpAbox:hover .newCenter_helpContbox2,.newCenter_helpAbox:hover .newCenter_helpContbox3 {
    color: $baseColor;
}
</style>
